<script setup lang="ts" name="TxMap">
import { onMounted, reactive, getCurrentInstance } from 'vue'
import loadSDK from '../utils/loadSDK';

type IStore = {
    // 地图数据
    map: any;
    qq: any;
    center: {
      lat: number;
      lng: number;
    };
    placeOptions: any[];
  };
const store = reactive<IStore>({
    // 地图数据
    map: null,
    qq: null,
    center: { lat: 39.984104, lng: 116.307503 },
    placeOptions: [],
  });
  
  const currentInstance = getCurrentInstance();
onMounted(async () => {
  await loadSDK('2.exp', 'ZALBZ-ZRACX-5CC4K-T7AI4-SQ34K-K7BUY', ['place']);
  initMap();
})
// 初始化地图
function initMap(latitude = '22.121', longitude = '113.35') {
  store.qq = (window as any).qq;
  // 定义地图中心点坐标
  const center = new store.qq.maps.LatLng(latitude, longitude);
  // 定义map变量，调用 TMap.Map() 构造函数创建地图
  const txMapContainer = currentInstance?.refs.txMapContainer;
  if (txMapContainer) {
    store.map = new store.qq.maps.Map(txMapContainer, {
      center, // 设置地图中心点坐标
      zoom: 13, // 设置地图缩放级别
      mapTypeId: store.qq.maps.MapTypeId.ROADMAP,
    });
  }
  store.qq.maps.tmapCallback = (res: any) => {
    store.placeOptions = res.detail.map((item: { name: any; }) => {
      return {
        ...item,
        value: item.name,
        label: item.name,
      };
    });
  };
}
</script>

<template>
  <div
    ref="txMapContainer"
    style="width: 300px; height: 300px; margin-top: 10px"
  ></div>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
